// NetFlow 网络流量管理系统 - 统计信息页面脚本

// 图表对象
let trafficChart;
let appChart;
let queueChart;
let dropChart;

// 格式化字节数为可读格式
function formatBytes(bytes, decimals = 2) {
    if (bytes === 0) return '0 Bytes';
    
    const k = 1024;
    const dm = decimals < 0 ? 0 : decimals;
    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
    
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    
    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}

// 初始化所有图表
function initCharts() {
    // 流量统计图表
    trafficChart = echarts.init(document.getElementById('traffic_chart'));
    const trafficOption = {
        title: {
            text: '近24小时流量统计'
        },
        tooltip: {
            trigger: 'axis',
            formatter: function(params) {
                let result = params[0].axisValue + '<br/>';
                params.forEach(function(param) {
                    result += param.seriesName + ': ' + formatBytes(param.value) + '<br/>';
                });
                return result;
            }
        },
        legend: {
            data: ['上行流量', '下行流量']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: generateTimeData(24)
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: function(value) {
                    return formatBytes(value);
                }
            }
        },
        series: [
            {
                name: '上行流量',
                type: 'line',
                data: generateRandomTrafficData(24, 1073741824, 5368709120) // 1GB-5GB
            },
            {
                name: '下行流量',
                type: 'line',
                data: generateRandomTrafficData(24, 2147483648, 10737418240) // 2GB-10GB
            }
        ]
    };
    trafficChart.setOption(trafficOption);
    
    // 应用流量统计图表
    appChart = echarts.init(document.getElementById('app_chart'));
    const appOption = {
        title: {
            text: '应用流量分布'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 10,
            data: ['视频会议', '语音通话', '在线游戏', '视频流媒体', '音频流媒体', 
                   '网页浏览', '文件下载', 'P2P下载', '远程登录', '邮件', '系统更新', '其他']
        },
        series: [
            {
                name: '应用流量',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '16',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    {value: 1250, name: '视频会议'},
                    {value: 850, name: '语音通话'},
                    {value: 750, name: '在线游戏'},
                    {value: 3500, name: '视频流媒体'},
                    {value: 1200, name: '音频流媒体'},
                    {value: 1800, name: '网页浏览'},
                    {value: 2500, name: '文件下载'},
                    {value: 950, name: 'P2P下载'},
                    {value: 350, name: '远程登录'},
                    {value: 450, name: '邮件'},
                    {value: 650, name: '系统更新'},
                    {value: 750, name: '其他'}
                ]
            }
        ]
    };
    appChart.setOption(appOption);
    
    // 优先级队列统计图表
    queueChart = echarts.init(document.getElementById('queue_chart'));
    const queueOption = {
        title: {
            text: '优先级队列统计'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['包数量', '字节数']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['最高优先级', '高优先级', '普通优先级', '低优先级']
        },
        yAxis: [
            {
                type: 'value',
                name: '包数量',
                axisLabel: {
                    formatter: '{value}'
                }
            },
            {
                type: 'value',
                name: '字节数',
                axisLabel: {
                    formatter: function(value) {
                        return formatBytes(value);
                    }
                }
            }
        ],
        series: [
            {
                name: '包数量',
                type: 'bar',
                data: [1250000, 2350000, 3150000, 1850000]
            },
            {
                name: '字节数',
                type: 'bar',
                yAxisIndex: 1,
                data: [1250000000, 2350000000, 3150000000, 1850000000]
            }
        ]
    };
    queueChart.setOption(queueOption);
    
    // 丢包统计图表
    dropChart = echarts.init(document.getElementById('drop_chart'));
    const dropOption = {
        title: {
            text: '丢包统计'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['丢包数量', '丢包率']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['最高优先级', '高优先级', '普通优先级', '低优先级']
        },
        yAxis: [
            {
                type: 'value',
                name: '丢包数量',
                axisLabel: {
                    formatter: '{value}'
                }
            },
            {
                type: 'value',
                name: '丢包率',
                min: 0,
                max: 100,
                axisLabel: {
                    formatter: '{value}%'
                }
            }
        ],
        series: [
            {
                name: '丢包数量',
                type: 'bar',
                data: [1250, 3500, 8500, 15000]
            },
            {
                name: '丢包率',
                type: 'line',
                yAxisIndex: 1,
                data: [0.1, 0.5, 1.2, 2.8]
            }
        ]
    };
    dropChart.setOption(dropOption);
}

// 生成过去24小时的时间数据
function generateTimeData(hours) {
    const data = [];
    const now = new Date();
    
    for (let i = hours - 1; i >= 0; i--) {
        const time = new Date(now.getTime() - i * 3600000);
        data.push(time.getHours() + ':00');
    }
    
    return data;
}

// 生成随机流量数据
function generateRandomTrafficData(count, min, max) {
    const data = [];
    
    for (let i = 0; i < count; i++) {
        data.push(Math.floor(min + Math.random() * (max - min)));
    }
    
    return data;
}

// 页面加载完成后初始化
window.addEventListener('load', function() {
    // 初始化图表
    initCharts();
    
    // 窗口大小改变时重绘图表
    window.addEventListener('resize', function() {
        if (trafficChart) trafficChart.resize();
        if (appChart) appChart.resize();
        if (queueChart) queueChart.resize();
        if (dropChart) dropChart.resize();
    });
});
